<script setup lang="ts">
    import expert from "./expert.vue"
</script>

<template>
    <div class="wrapper">
        <div class="item">
            <h3 class="title font-lg font-bold">
                核心资源构成
            </h3>
            <div class="resour1-wrapper flex justify-between">
                <div class="resour1-item">
                    <img src="https://img.cctvch.cn/uploads/c9aa7a605d8e82bed74696250f3408eb.png" alt="">
                </div>
                <div class="resour1-item">
                    <img src="https://img.cctvch.cn/uploads/c2d662a4b6929b39705ac75f36d0e64f.png" alt="">
                </div>
                <div class="resour1-item">
                    <img src="https://img.cctvch.cn/uploads/ab644ba5420c653e6f4e0fd60368dd8d.png" alt="">
                </div>
                <div class="resour1-item">
                    <img src="https://img.cctvch.cn/uploads/0381806e1bd392236d374aff8cf85f39.png" alt="">
                </div>
            </div>
            <div class="resour2-wrapper flex justify-around">
                <div class="resour2-item">
                    <img src="https://img.cctvch.cn/uploads/bafe752df86df8ced1390dc8a95c9904.png" alt="">
                </div>
                <div class="resour2-item">
                    <img src="https://img.cctvch.cn/uploads/e72c1b6915676afd5efdbdbf515db956.png" alt="">
                </div>
            </div>
        </div>
        <div class="item">
            <h3 class="title font-lg font-bold">
                守望地球简介
            </h3>
            <ul class="introduce-wrapper flex justify-between">
                <li class="introduce-item">
                    <p class="introduce-title text-ellipsis font-m font-bold color-title"><span>INUW</span></p>
                    <p class="introduce-text font font-normal">
                    守望地球创办于2012年，是世界自然保护联盟(IUCN)在华单位成员。组建了中国首支青少年碳测队，对碳排放量和碳排放强度等信息的调查研究。</p>
                </li>
                <li class="introduce-item">
                    <p class="introduce-title text-ellipsis font-m font-bold color-title"><span>独家合作授权</span></p>
                    <p class="introduce-text font font-normal">
                    作为中国第一家国际野外科研志愿者机构，持有全球22个国家级自然保护区在中国市场的独家合作授权。作为中国民间组织成员出席联合国气候大会及其他国际环境公约缔约方大会等高级别国际环保论坛，发出来自中国民间的声音。</p>
                </li>
                <li class="introduce-item">
                    <p class="introduce-title text-ellipsis font-m font-bold color-title"><span>守望地球“气候尖兵”校际伙伴计划</span>
                    </p>
                    <p class="introduce-text font font-normal">
                    在全国范围内启动守望地球“气候尖兵”校际伙伴计划。将公益与商业资源的巧妙融合，为企业持续创造更加广泛的社会效应及商业价值。</p>
                </li>
            </ul>
        </div>
        <div class="item">
            <h3 class="title font-lg font-bold">
                守望地球全球顾问委员会专家
            </h3>
            <expert></expert>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.wrapper{
    margin-bottom:80px;
}
.item {
    .title {
        margin-top: 53px;
        margin-bottom: 34px;
    }

    .color-title {
        span {
            background-image: linear-gradient(to right, #252086 0%, #e60012 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }

    // 核心资源
    .resour1-wrapper {
        .resour1-item {
            width: 290px;
            height: 150px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0px 5px 26px 3px rgba(98, 102, 117, 0.1500);

            img {
                display: block;
                width: 100%;
                height: 100%;
            }
        }
    }

    .resour2-wrapper {
        margin-top: 45px;

        .resour2-item {
            width: 564px;
            height: 150px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0px 5px 26px 3px rgba(98, 102, 117, 0.1500);

            img {
                display: block;
                width: 100%;
                height: 100%;
            }
        }
    }

    // 地球简介
    .introduce-wrapper {
        margin-top: 60px;

        .introduce-item {
            width: 440px;

            .introduce-title {}

            .introduce-text {
                margin-top: 21px;
                line-height: 22px;
            }
        }
    }
}
</style>